<template>
  <div class="products">
    <div class="products__title">{{ shopName }}</div>
    <div class="products__wrapper">
      <div class="products__list">
        <div class="products__item" v-for="item in productList" :key="item._id">
          <img class="products__item__img" :src="item.imgUrl" />
          <div class="products__item__detail">
            <h4 class="products__item__title">{{ item.name }}</h4>
            <p class="products__item__price">
              <span>
                <span class="products__item__yen"> &yen; </span>
                {{ item.price }}×{{ item.count }}
              </span>
              <span class="products__item__total">
                <span class="products__item__yen"> &yen; </span>
                {{ (item.price * item.count).toFixed(2) }}
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { useCommonCartEffect } from '@/effects/cartEffects'
  import { useRoute } from 'vue-router' // 路由跳转方法
  export default {
    name: 'ProductList',
    setup() {
      const route = useRoute()
      const shopId = route.params.shopId // 店铺id
      const { shopName, productList } = useCommonCartEffect(shopId)

      return {
        shopName,
        productList
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '@/style/viriables.scss';
  @import '@/style/mixins.scss';
  .products {
    margin: 0.16rem 0.18rem 0.2rem 0.18rem;
    background: $bg-color;
    &__title {
      padding: 0.16rem;
      font-size: 0.16rem;
      color: $content-font-color;
    }
    // list外层的wrapper容器
    &__wrapper {
      overflow-y: scroll;
      position: absolute;
      margin: 0 0.18rem;
      left: 0;
      right: 0;
      bottom: 0.6rem;
      top: 2.6rem;
    }
    &__list {
      background: $bg-color;
    }
    &__item {
      position: relative;
      display: flex;
      padding: 0 0.16rem 0.16rem 0.16rem;
      &__img {
        width: 0.46rem;
        height: 0.46rem;
        margin-right: 0.16rem;
      }
      // 配合解决超出长度以省略号显示而不会出现换行
      &__detail {
        overflow: hidden;
        flex: 1;
      }

      &__title {
        margin: 0;
        line-height: 0.2rem;
        font-size: 0.14rem;
        color: $content-font-color;
        // 超出长度以省略号显示而不会出现换行
        @include ellipsis;
      }
      &__price {
        display: flex;
        margin: 0.06rem 0 0 0;
        line-height: 0.2rem;
        font-size: 0.14rem;
        color: $height-light-font-color;
      }
      &__total {
        text-align: right;
        color: $dark-font-color;
        flex: 1;
      }
      &__yen {
        font-size: 0.12rem;
      }
    }
  }
</style>
